<template>
	<view class="container" :style="[grayScaleStyle]">
		<!-- 自定义顶部导航栏 -->
		<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="left-area" @click="goBack">
					<text class="iconfont icon-more trasnicon" ></text>
					<text class="nav-title">今日推荐</text>
				</view>

			</view>
		</view>
		<view class="" :style="{ paddingTop: navHeight + 'px' }"></view>
		<scroll-view class="bill-container" scroll-y>
			<!-- 内容区域 -->
			<view class="page-content">
				<!-- 顶部banner -->
				<view class="banner">
					<image src="https://picsum.photos/800/300" mode="aspectFill"></image>
				</view>

				<!-- 分类列表 -->
				<view class="category-list">

					<view v-for="(category, index) in categories" :key="index" class="category-item">
						<image :src="category.image" mode="aspectFill" class="category-image"></image>
						<view class="category-box">
							<!-- 分类标题栏 -->
							<view class="category-header">
								<text class="category-title">{{category.title}}</text>
								<text class="iconfont icon-more"></text>
							</view>

							<!-- 分类商品列表 -->
							<view class="shop-list">
								<view v-for="(shop, shopIndex) in category.shops" :key="shopIndex" class="shop-item"
									@click="gotoStore(shop, category.testData,shopIndex)">
									<image :src="shop.image" mode="aspectFill" class="shop-image"></image>
									<view class="shop-info">

										<view class="shop-meta">
											<text class="shop-name">{{shop.name}} </text>
											<text class="">{{shop.distance}}</text>
										</view>
										<view class="shop-meta">
											<text class="person-price">人均:{{shop.personNum}}</text>
											<text class="price">月售:{{shop.averagePrice}}</text>
											<text class="distance">积分抵扣:</text>
											<text class="discount">{{shop.discount}}</text>
										</view>
									</view>
								</view>
							</view>

						</view>



					</view>
				</view>
			</view>

			<view class="nullBox"></view>

		</scroll-view>
	</view>
</template>

<script>
	import grayScaleMixin from '../mixins/grayScale.js'
	import DATATEST from '../mixins/data.js'
	console.log(DATATEST)
	export default {
		mixins: [grayScaleMixin],
		data() {
			const baseFn = (data) => {
				const sportlist = [];
				data.forEach( el => {
					const Num = Math.floor(Math.random() * (100 - 10 + 1)) + 10;
					const personNum = Math.floor(Math.random() * (100 - 10 + 1)) + 10;
					const discount = Math.floor(Math.random() * 100) + 1;
					sportlist.push({
						name: el.region,
						image: el.img,
						averagePrice: Num+'+',
						personNum: personNum,
						distance: el.distance,
						discount: discount+'%'
					});
				})
				return sportlist
			}
			return {
				statusBarHeight: 0,
				navHeight: 0,
				categories: [{
						title: '特色美食',
						testData: 'MEISHI',
						image: 'http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/img11.png',
						shops: baseFn(DATATEST.MEISHI),
					},
					{
						title: '电子产品',
						testData: 'DIANZI',
						image: 'http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/img12.png',
						shops:  baseFn(DATATEST.DIANZI),
					},
					{
						title: '超市便利',
						testData: 'SHOPPING',
						image: 'http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/img3.png',
						shops:  baseFn(DATATEST.SHOPPING),
					},
					{
						title: '运动健身',
						testData: 'SPORT',
						image: 'http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/img4.png',
						shops:  baseFn(DATATEST.SPORT),
					},
					{
						title: '酒店民宿',
						testData: 'HOTEL',
						image: 'http://sq85owu9k.hb-bkt.clouddn.com/lingpin/static/lottery/img5.png',
						shops:  baseFn(DATATEST.HOTEL),
					},
					
				]
			}
		},
		onLoad() {
			// 获取系统信息设置状态栏高度
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
			// 导航栏总高度 = 状态栏高度 + 44(导航内容高度)
			this.navHeight = systemInfo.statusBarHeight + 44
		},
		methods: {
			gotoStore(data, datatr,idx) {
				uni.setStorageSync('itemDetail', DATATEST[datatr][idx])
				
				uni.navigateTo({
					url: '/moduleA/recommendation/store/index'
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #f6f6f6;
		min-height: 100vh;
		position: relative;
	}

	.bill-container {
		height: calc(100vh - 170rpx);
	}

	.custom-nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: linear-gradient(180deg, #e8f7f3 0%, #e8f7f3 44%, rgba(232, 247, 243, 0) 100%);

		.trasnicon {
			transform: rotate(180deg);
		}

		.nav-content {
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 12px;
			background: transparent;

			.left-area {
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 30rpx;
					color: #333;
					margin-right: 8px;
				}

				.nav-title {
					font-size: 16px;
					color: #333;
					font-weight: 500;
				}
			}

			.right-area {
				display: flex;
				align-items: center;

				.icon-btn {
					width: 32px;
					height: 32px;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 8px;

					.iconfont {
						font-size: 20px;
						color: #333;
					}
				}

				.share-btn {
					background: #f5f5f5;
					border-radius: 50%;
				}
			}
		}
	}

	.banner {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 110px;
		padding: 0 12px;
		margin-bottom: 8px;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8px;
		}
	}

	.category-list {
		position: relative;
		z-index: 1;
		padding: 0 12px;

		.category-item {
			background-color: #fff;
			border-radius: 8px;
			margin-bottom: 8px;
			padding: 10px;
			display: flex;
			background: #ffffff;
			border-radius: 6px;
			box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);

			.category-image {
				width: 168rpx;
				min-width: 168rpx;
				max-width: 168rpx;
				height: 314rpx;
				margin-right: 20rpx;
			}

			.category-box {
				flex: 1;
			}

			.category-header {
				width: 94%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 12px;

				.category-title {
					font-size: 16px;
					font-weight: 500;
					color: #333;
				}

				.iconfont {
					font-size: 14px;
					color: #999;
				}
			}
		}
	}

	.shop-list {
		.shop-item {
			display: flex;
			padding: 4rpx 0;

			// &:not(:last-child) {
			//   border-bottom: 0.5px solid #f5f5f5;
			// }

			.shop-image {
				width: 76rpx;
				height: 76rpx;
				border-radius: 4px;
				margin-right: 12px;
			}

			.shop-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.shop-name {
					font-size: 24rpx;
					color: #000;
					margin-bottom: 4px;
					width: 300rpx;
					// 文字超出显示省略号
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.shop-meta {
					display: flex;
					align-items: center;
					font-size: 20rpx;
					color: #646464;

					text {
						margin-right: 8px;

						&.person-price {
							color: #646464;
						}

						&.price {
							color: #646464;
						}

						&.distance {
							color: #646464;
						}

						&.discount {
							color: #ff4444;
							background-color: #fff1f1;
							padding: 2px 4px;
							border-radius: 2px;
							font-size: 10px;
							margin-right: 0;
						}
					}
				}
			}
		}
	}

	.page-content {
		position: relative;
		width: 100%;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 200px;
			background: linear-gradient(180deg, #e8f7f3 0%, rgba(232, 247, 243, 0) 100%);
			z-index: 0;
		}
	}

	.nullBox {
		width: 100%;
		height: 80rpx;
	}
</style>